<template>
	<view>
		<view class="state-box">
			<view class="">
				<view class="headline">
					<view class="headline-left">
						{{data.machineryName}}
					</view>
				</view>
				<view class="information">
					报修人员：{{data.createBy}}
				</view>
				<view class="information">
					设备编码：{{data.machineryCode}}
				</view>
				<view class="information">
					设备Id：{{data.machineryId}}
				</view>
				<view class="information">
					维修单Id：{{data.repairId}}
				</view>
				<view class="" style="display: flex;align-items: center;margin-bottom: 10rpx;">
					<view class="" style="opacity: 0.3;font-size: 12px;font-weight: 400;color: black;">
						紧急程度：
					</view>
					<view
						:class="{FINISHED:data.urgencyDegree == '一般',VERIFYING:data.urgencyDegree == '紧急',REPAIRING:data.urgencyDegree == '非常紧急'} "
						id="state-show">
						<text>{{data.urgencyDegree}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="newRepairs-box">
			<u--form labelPosition="left" :model="data" ref="uForm" labelWidth="170rpx" labelAlign="right">
				<u-form-item label="故障原因：" borderBottom ref="item1" :required="true">
					<u--textarea v-model="data.repairLineList[0].malfunctionReason" placeholder="请输入内容"></u--textarea>
				</u-form-item>
				<u-form-item label="维修措施：" borderBottom ref="item1" :required="true">
					<u--textarea v-model="data.repairLineList[0].repairDes" placeholder="请输入内容"></u--textarea>
				</u-form-item>

			</u--form>
		</view>
		<!-- 按钮 -->
		<view class="button">
			<view class="button-left buuton-common">
				取消
			</view>
			<view class="button-right buuton-common" @click="submit">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getDetails
	} from '@/api/facilityMaintain/details.js'
	import {
		putComplete
	} from '@/api/facilityMaintain/report.js'
	export default {
		data() {
			return {
				data: {
					repairLineList: [{
						malfunctionReason: '',
						repairDes: ''
					}]
				},
				dict: [{
					k: "0",
					y: "一般"
				}, {
					k: "1",
					y: "紧急"
				}, {
					k: "2",
					y: "非常紧急"
				}]
			};
		},
		onLoad(options) {
			console.log(options.repairId);
			this.getDetails(options.repairId)
		},
		methods: {
			// 提交
			submit() {
				if (this.data.repairLineList[0].malfunctionReason.length >= 1 || this.data.repairLineList[0].repairDes.length >= 1) {
						putComplete(this.data).then(res=>{
							uni.showToast({
								title: '维修结果已提交！',
								icon: 'none'
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						})
				} else {
					uni.showToast({
						title: '请填写故障原因或者维修措施！',
						icon: 'none'
					})
				}
			},
			// 获取详细信息
			getDetails(repairId) {
				getDetails(repairId).then(res => {
					this.dict.forEach(str => {
						if (res.data.urgencyDegree == str.k) {
							res.data.urgencyDegree = str.y
						}
					})
					res.data.repairLineList.forEach(item => {
						item.malfunctionReason = ''
						item.repairDes = ''
					})
					this.data = res.data
				})
			},
			// 关闭弹出层
			close() {
				this.show = false
			},
			// 多选按钮
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.state-box {
		margin: 32rpx 32rpx 32rpx 32rpx;
		padding: 48rpx 32rpx 64rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			margin-bottom: 32rpx;
		}

		.headline {
			margin-bottom: 32rpx;
			display: flex;
			justify-content: space-between;
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

			.headline-right {
				width: 112rpx;
				height: 36rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: linear-gradient(90deg, rgba(255, 198, 128, 0.1) 0%, rgba(242, 174, 90, 0.1) 100%);

				font-size: 20rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 36rpx;
				color: rgba(255, 195, 0, 1);
				text-align: center;

			}

		}

		view {
			// margin-bottom: 32rpx;s
		}
	}

	#state-show {
		width: 130rpx;
		height: 44rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 44rpx;

	}

	.FINISHED {
		background-color: #e7faf0;
		color: #13ce66;
	}

	.VERIFYING {
		background-color: #fff8e6;
		color: #ffba00;
	}

	.REPAIRING {
		background-color: #ffeded;
		color: #ff4949;
	}

	::v-deep .newRepairs-box {
		margin: 32rpx;
		margin-top: 0;
		opacity: 1;

		.u-icon__icon {
			color: #bfc0c7 !important;
		}
	}

	// 校验星号
	::v-deep .u-form-item__body__left__content__required {
		left: -2rpx !important;
	}



	::v-deep .u-form-item__body__left__content__label {
		font-weight: 400;
		font-size: 30rpx;
	}


	::v-deep .weizi {
		.u-popup__content {
			height: 500rpx !important;
			width: 690rpx !important;
			opacity: 1;
			border-radius: 20rpx !important;
			background: white;
		}

		.u-checkbox {
			margin-bottom: 48rpx !important;
		}
	}

	.container {
		height: 200rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
	}

	// 多选框得边框颜色
	::v-deep .u-checkbox__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-checkbox-group--column {
		padding: 0 32rpx;
	}



	.button {

		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;

		.buuton-common {
			width: 296rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;

			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-right {
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			color: rgba(255, 255, 255, 1);
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: rgba(32, 37, 64, 1);
		}
	}

	.popup-header {
		margin: 0 32rpx 24rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	// -------------------------------
	// 弹出层样式
	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}
</style>